<template>
  <van-popup v-model:show="show" position="bottom">
    <van-picker-group
      title="选择时间"
      :tabs="['选择日期', '选择时间']"
      @confirm="onConfirm"
      @cancel="onCancel"
    >
      <van-date-picker
        v-model="currentDate"
        :min-date="exMinDate"
        :max-date="exMaxDate"
      ></van-date-picker>
      <van-time-picker v-model="currentTime" :columns-type="columnsType"></van-time-picker>
    </van-picker-group>
  </van-popup>
</template>

<script setup>
import dayjs from 'dayjs';
import { ref } from 'vue';
const props = defineProps({
  maxDate: Date,
  minDate: Date,
})

const columnsType = ['hour', 'minute', 'second'];
const exMinDate = props.minDate || new Date('2000-01-01');// 日历可选的最小值
const exMaxDate = props.maxDate || new Date();// 日历可选的最大值
const show = defineModel('show');
const emit = defineEmits(['cancel', 'confirm'])
const today = new Date();
const nowDate = {
  year: today.getFullYear(),
  month: today.getMonth()+1,
  date: today.getDate(),
  hour: today.getHours(),
  minute: today.getMinutes(),
  second: today.getSeconds(),
};
const currentDate = ref([nowDate.year, nowDate.month, nowDate.date]);
const currentTime = ref([nowDate.hour, nowDate.minute, nowDate.second]);

const onConfirm = () => {
  console.log('currentDate', currentDate.value);
  console.log('currentTime', currentTime.value);
  const dateTime = `${currentDate.value.join('-')} ${currentTime.value.join(':')}`;
  emit('confirm', dayjs(dateTime).format('YYYY-MM-DD HH:mm:ss'));
  show.value = false;
};

const onCancel = () => {
  emit('onCancel');
  show.value = false;
};

</script>

<style scoped></style>